<template>
  <div class="app-container">
    <el-form :inline="true" :model="form">
      <el-form-item>
        <el-button type="success" @click="handleAdd()">添加任务</el-button>
      </el-form-item>
      <el-form-item label="任务名称">
        <el-input v-model="form.taskName"></el-input>
      </el-form-item>
      <el-form-item label="任务类型">
        <!-- filterable 搜索优化 -->
        <el-select v-model="form.typeIds" filterable>
          <!-- <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option> -->
          <!-- vuex -->
          <el-option :label="item.typeName" :value="item.id" v-for="item in $store.state.data.types"
            :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务时间">
        <el-date-picker v-model="value1" type="monthrange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始月份" end-placeholder="结束月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="任务地点">
        <el-select v-model="form.district" clearable>
          <el-option :label="item.label" :value="item.label" v-for="item in districts"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTaskList">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border>
      <el-table-column prop="id" label="编号ID"></el-table-column>
      <el-table-column prop="taskName" label="任务名称"></el-table-column>
      <el-table-column prop="taskTypeId" label="任务类型">
        <template slot-scope="scope">
          {{ getTypeName(scope.row.taskTypeId) }}
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column prop="taskDistrict" label="任务地点"></el-table-column>
      <el-table-column prop="durationStatus" label="时长审核">
        <template slot-scope="scope">
          <!-- null 待录入 -->
          <!-- 0 待审核 -->
          <!-- 1 已审核 -->
          <!-- 2 已驳回 -->
          <el-tag v-if="scope.row.durationStatus === null">待录入</el-tag>
          <el-tag v-else-if="scope.row.durationStatus === 1" type="success">已审核</el-tag>
          <el-tag v-else-if="scope.row.durationStatus === 0" type="warning">待审核</el-tag>
          <el-tag v-else-if="scope.row.durationStatus === 2" type="danger">已驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="durationStatus" label="时长审核" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button v-if="scope.row.durationStatus !== 1" type="warning" size="mini">时长录入</el-button>
          <el-button v-if="scope.row.durationStatus === 0" type="danger" size="mini">时长审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
      :page-sizes="[5, 10, 20, 40]" :page-size="form.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


  </div>
</template>

<script>
import { taskList } from "@/api/task"
import { regionData } from 'element-china-area-data'
// import router from "@/router"
let districts = []
districts = regionData.find(item => item.label == "江苏省").children.find(item => item.label == "南京市").children
districts.push({ value: "999999", label: "外市" })
// import add from "@/views/task/components/add.vue"
export default {
  data() {
    return {
      value1: "",//日期选择器
      form: {
        startDate: "",
        endDate: "",
        page: 1,
        pageSize: 5
      },
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      id: "",
      districts,
    }
  },
  methods: {
    getTaskList() {
      taskList(this.form).then(res => {
        console.log(res);
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.form.page = 1// 重置页码
      this.form.pageSize = val;
      this.getTaskList()
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getTaskList()
    },
    getTypeName(typeId) {
      // console.log(this.$store.state,'STORE');
      let type = this.$store.state.data.types.find(item => item.id == typeId)
      return type?.typeName
      //?.是可选链操作符，它用于安全地访问对象的属性。如果type是null或undefined,那么表达式会立即返回undefined，而不会抛出错误。
      //假设有一个表示数据类型的对象，你想获取它的类型名称，但又不确定该对象是否为null或undefined，就可以使用这种表达式来安全地获取。
    },
    handleAdd() {
      console.log('add');
      this.$router.push({ path: "/task/add" })
    },
    handleEdit(id) {
      console.log('edit', id);
      this.$router.push({ path: "/task/add", query: { id } })
    },
  },
  mounted() {
    this.getTaskList()
  },
  watch: {
    value1: {
      handler() {
        if (Array.isArray(this.value1)) {//判断时间数组是否存在，即是否选择了一段日期
          this.form.startDate = this.value1[0]
          this.form.endDate = this.value1[1]
        }
      }
    }
  },
}
</script>
